<script setup lang="ts">
import { EIGHTEEN_HELL } from '@/auth/auth.config';
import { Search } from '@element-plus/icons-vue'
import { reactive } from "@vue/reactivity";
import { onMounted, ref } from 'vue';

onMounted(() => {
    getList()
})

// 筛选 - 死亡方式
const optionsDieValue = ref()
const optionsDieType = ref([
    { value: '1', label: '善终' },
    { value: '2', label: '天灾' },
    { value: '3', label: '人祸' },
    { value: '4', label: '疾病' }
])

// 筛选 - 地狱层数
const optionsLevelValue = ref()
const optionsLevelType = ref(EIGHTEEN_HELL)

// 搜索
const searchKey = ref('')
const onSearch = () => {
    getList()
}

// 列表数据
const data = reactive<any>({
    list: [],
    pageIndex: 1,
    pageSize: 20,
    loading: false
})
const getList = () => {
    data.loading = true
    setTimeout(() => {
        data.loading = false
        const arr = [];
        for(let i = 0; i < 50; i++) {
            arr.push({id: i + 1, name: '秦始皇', life: "49", mode: '疾病', layer: 1},);
        }
        data.list = arr
    }, 1000)
}
const onSizeChange = (value: number) => {
    data.pageSize = value
    getList()
}
const onCurrentChange = (value: number) => {
    data.pageIndex = value
    getList()
}
</script>

<template>
    <div class="infernal-user">
        <div class="z-option">
            <div class="option-left">
                <div class="option-item">
                    <el-select v-model="optionsDieValue" placeholder="请选择死亡方式" size="large" clearable>
                        <el-option v-for="item in optionsDieType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </div>
                <div class="option-item">
                    <el-select v-model="optionsLevelValue" placeholder="请选择地狱层数" size="large" clearable>
                        <el-option v-for="item in optionsLevelType" :key="item.id" :label="item.level" :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="option-item">
                    <el-input v-model="searchKey" size="large" placeholder="输入要搜索的内容" :suffix-icon="Search" />
                </div>
                <div class="option-item">
                    <el-button type="primary" size="large" @click="onSearch">搜索</el-button>
                </div>
            </div>
        </div>
        <div class="z-table">
            <el-table :data="data.list" v-loading="data.loading" :max-height="710" size="large">
                <el-table-column prop="id" label="id" width="100"/>
                <el-table-column prop="name" label="姓名"/>
                <el-table-column prop="life" label="寿命（岁）"/>
                <el-table-column prop="mode" label="死亡方式" />
                <el-table-column prop="layer" label="所在地狱（层）"/>
                <el-table-column label="操作" align="center">
                    <el-button type="primary" link>编辑</el-button>
                    <el-button type="danger" link>删除</el-button>
                </el-table-column>
            </el-table>
        </div>
        <div class="z-pagination">
            <el-pagination background layout="total, prev, pager, next, sizes" :total="100" :page-sizes="[10, 15, 20]" @size-change="onSizeChange" @current-change="onCurrentChange"></el-pagination>
        </div>
    </div>
</template>

<style scoped lang="scss">

</style>